<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示书籍</title>
</head>
<style>
    table{
        margin-top: 20px;
        border-collapse:collapse; /*表示将单元格中各小格之间的空隙进行合并*/
        border:1px olivedrab solid; /*定义边框样式*/
    }
    .button {
        position: center;
        text-align:center;
        background-color: coral;
        color: white;
        text-decoration:none;//去下划线
        border-color: chocolate;
        border-bottom-color: chocolate;
        border-right-color: chocolate;
        border-radius:7px;//按钮圆角锐化
    }
    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 10px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }
    .button1{

        position: center;
        text-align:center;
        background-color: coral;
        color: white;
        border-color: chocolate;
        border-bottom-color: chocolate;
        border-right-color: chocolate;
        border-radius:7px;//按钮圆角锐化
    }
    .button2{

        position: center;
        text-align:center;
        background-color: #76b6ff;
        color: white;
        border-color: #76b6ff;
        border-bottom-color: #76b6ff;
        border-right-color: #76b6ff;
        border-radius:7px;//按钮圆角锐化
    }

</style>
<body th:align="center">
<div>
    <form th:action="@{getBook(bookId=${bookId},bookName=${bookName})}">
        <label>输入书本ID：<input type="text" placeholder="请输入id关键字进行搜索" class="seach" name="bookId" id="bookId"/></label>
        <label>书本名：<input type="text" placeholder="请输入用戶名关键字进行搜索" class="seach" name="bookName" id="bookName"/></label>
        <button type="submit"  class="button"><span>查找用戶</span></button>
    </form>
</div>

<table border="2" th:align="center">
    <tr>
        <th>书本ID</th>
        <th>书本名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>时间</th>
        <th>书本位置</th>
        <th>操作</th>
    </tr>
    <tr th:each="book : ${pageInfo.list}" >
        <td th:text="${book.bookId}"></td>
        <td th:text="${book.bookName}"></td>
        <td th:text="${book.author}"></td>
        <td th:text="${book.publisher}"></td>
        <td th:text="${book.publishDate}"></td>
        <td th:text="${book.bookPosition}"></td>
        <td>
            <a th:href="@{deleteBook(bookId=${book.bookId})}"><button class="button1"style="cursor: pointer"/><span>刪除</span></button></a>
            <a th:href="@{changeBook(bookId=${book.bookId})}"><button class="button1" style="cursor: pointer"/><span>修改</span></button></a>
        </td>
    </tr>
</table>

<a th:href="@{addBook}"><button class="button1" style="margin-top: 10px">添加书本</button></a>

<p>
    当前 <span th:text="${pageInfo.pageNum}"></span> 页,
    总 <span th:text="${pageInfo.pages}"></span> 页,
    共<span th:text="${pageInfo.total}"></span> 条记录
</p>

<div >
    <br>
    <a th:href="@{viewBook}"><button class="button2" >首頁</button></a>
    <a th:href="@{viewBook(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"> <button class="button2">上一页</button></a>
    <a th:href="@{viewBook(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"><button class="button2">下一頁</button></a>
    <a th:href="@{viewBook(pageNum=${pageInfo.pages})}"><button class="button2">末页</button ></a>
    <br>
</div>

</body>
</html>
